<template>
  <div id="details">
    <!-- <h1>个人信息页面</h1> -->
    <div class="top">
      <span>{{ this.title }}</span>
    </div>
    <div id="header">
      <div id="workName">
        <span>{{ this.detailInfo.title }}</span>
      </div>
      <div id="workDetails">
        <span>作者：{{ this.detailInfo.author }} </span>
        <span style="margin-left: 8px"> 日期：{{ this.detailInfo.date }} </span>
        <span style="margin-left: 8px">
          浏览量：{{ this.detailInfo.viewNum }}
        </span>
        <div>（有些图片资源过大，加载可能需要一些时间~）</div>
      </div>
    </div>
    <div id="workImg">
      <img
        :src="this.detailInfo.url"
        title="点击查看高清大图"
        width="880px"
        @click="oepnInNew(detailInfo.url)"
      />
    </div>
  </div>
</template>

<script>
import { getWorkDetails } from "../api/api.js";
export default {
  data() {
    return {
      title: "",
      titleList: [
        "",
        "樱园漫步",
        "樱·书法",
        "樱·绘画",
        "樱·社团",
        "樱·摄影",
        "樱·诗词",
      ],
      workId: 1, //作品id 需要根据这个查询详细信息
      detailInfo: {}, //详细信息
    };
  },
  mounted() {
    this.workId = this.$route.params.id;
    this.getDetails();
  },
  methods: {
    async getDetails() {
      console.log("id:", this.workId);
      let { data: res } = await getWorkDetails(this.workId);
      console.log("res", res);
      this.detailInfo = res.sakuraInfo;
      this.title = this.titleList[res.sakuraInfo.moduleId];
      console.log("title", this.title);
    },
    oepnInNew(url) {
      console.log(url);
      window.open(url);
    },
  },
};
</script>
<style lang="less" scoped>
#details {
  user-select: none;
  margin: auto;
  width: 1200px;
  .top {
    width: 1200px;
    height: 58px;
    margin-top: 20px;
    background-color: pink;
    span {
      display: inline-block;
      font-size: 22px;
      font-weight: 400;
      color: #fff;
      line-height: 58px;
    }
  }
  #header {
    #workName {
      line-height: 26px;
      font-family: "Microsoft YaHei";
      font-weight: bolder;
      padding: 5px;
      margin-top: 10px;
      text-align: center;
      font-size: 18px;
      color: #282828;
    }
    #workDetails {
      margin: 0 5px;
      font-size: 12px;
      color: #787878;
    }
  }
  #workImg {
    margin-top: 15px;
    cursor: pointer;
  }
}
</style>
